<template>
  <div class="search">
    <div class="search-box">
      <van-icon name="search" />
      <input
        type="text"
        placeholder="搜索商品信息"
        v-model="keywords"
        @keyup.enter="search"
        ref="searchboxws"
      />
      <a @click="search">搜索</a>
    </div>
    <component
      :is="showComponent"
      :keywords="keywords"
      @changekeyword="changekeyword"
    >
    </component>
  </div>
</template>
<script>
import SearchHot from "@/components/SearchHot.vue";
import SearchResult from "@/components/SearchResult.vue";
export default {
  name: "Search",
  data() {
    return {
      showComponent: SearchHot,
      keywords: "",
      showdel: false,
    };
  },
  created() {},
  mounted() {
    this.$refs.searchboxws.focus();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.$nextTick(() => {
        vm.$refs.searchboxws.focus();
      });
    });
  },
  methods: {
    search() {
      this.showComponent = SearchResult;
      // this.$router.push({
      //   path:`/search/${this.keywords}`,
      // })
    },
    changekeyword(event) {
      this.keywords = event;
      this.showComponent = SearchResult;
    },
    inputting() {
      if (this.keywords == "") {
        this.showComponent = SearchHot;
      } else {
        this.showdel = true;
        this.showComponent = SearchResult;
      }
    },
  },
  components: {
    SearchHot,
    SearchResult,
  },
  watch: {
    keywords(newValue) {
      if (newValue == "" || newValue.length == 0) {
        this.showComponent = SearchHot;
      } else {
        this.showComponent = SearchResult;
      }
    },
  },
};
</script>
<style scoped lang="less">
.search {
  width: 100%;
  padding: 5px 0;
  .search-box {
    margin: 5px 75px 5px 5px;
    background-color: #f7f7f7;
    border-radius: 40px;
    padding: 0 25px;
    position: relative;
    i {
      position: absolute;
      font-size: 20px;
      top: 50%;
      transform: translateY(-50%);
      color: #666;
      left: 10px;
      &.fa-times-circle {
        right: 10px;
      }
    }
    input {
      height: 20px;
      font-size: 14px;
      background-color: transparent;
      border: none;
      outline: none;
      color: #333;
      padding: 5px 0px 5px 10px;
    }
    a {
      position: absolute;
      right: -60px;
      background: transparent;
      border: none;
      color: #000000bd;
      font-size: 20px;
      padding: 5px;
    }
  }
}
// .search {
//   hr {
//     height: 0px;
//     border: none;
//     border-bottom: 1px solid rgb(226, 226, 226);
//   }
// }
</style>